<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div class="comment">
    <!-- 提交评论 -->
    <div class="subComment">
      <h1>发表评论</h1>
      <mu-button flat color="primary" @click="$router.back()">返回</mu-button>
    </div>
    <!-- 评论输入 -->
    <mu-container>
      <mu-text-field
        v-model="comment"
        placeholder="说点什么吧..."
        multi-line
        :rows="3"
        :max-length="100"
        :full-width="true"
        style="margin-top: 10px"
      ></mu-text-field
      ><br />
      <mu-button
        color="success"
        class="subBtn"
        style="width: 100%"
        @click="publishComment"
        >提交</mu-button
      >
    </mu-container>

    <!-- 评论列表 -->
    <div class="commentList">
      <h1>评论列表</h1>
      <span class="count">{{ commentList.length }}条评论</span>
    </div>
    <div class="commentItem" v-for="(item, index) in commentList" :key="index">
      <div class="icontent">{{ item.content }}</div>
      <div class="user">
        <div class="username">{{ item.user_name }}</div>
        <div class="time">{{ item.add_time | dateFormat }}</div>
      </div>
    </div>
    <div class="loadMore">
      <mu-button flat color="primary" @click="loadMore">加载更多</mu-button>
    </div>
  </div>
</template>


<script>
import moment from "moment";
export default {
  props: {
    // 评论的数据
    commentList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      comment: "", //评论内容
    };
  },
  methods: {
    //给父组件发出 加载评论 事件
    loadMore() {
      this.$emit("loadMore");
    },
    // 给父组件 发出发表评论 事件
    publishComment() {
      this.$emit("publishComment", this.comment);
      this.comment = "";
    },
  },
  filters: {
    dateFormat(data) {
      return moment(data).format("YYYY-MM-DD");
    },
  },
};
</script>


<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style lang='less' scoped>
.comment {
  width: 100%;
}
.subComment,
.commentList {
  width: 100%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  h1 {
    padding-left: 10px;
  }
}

.container {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.count {
  margin-right: 10px;
  color: #888;
}
.commentItem {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 5px;
  border-bottom: 1px solid #ccc;
  .icontent {
    color: #888;
    font-size: 14px;
  }
  .user {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .username {
      font-size: 13px;
      color: #4caf50;
    }
  }
  .time {
    font-size: 13px;
  }
}
.loadMore {
  text-align: center;
  .mu-button {
    width: 80%;
    margin: 8px;
  }
}
</style>